<template>
  <div>
    <!-- 顶部 -->
     <nav-top class="navtop">{{ $route.query.tit }} </nav-top>
    <!-- 内容 -->
    <!-- 主编精选 -->
    <book-item :data="hot" class="margin">
      <h3>主编精选</h3>
    </book-item>
    <!-- 列表 -->
    <book-list :data="list.books" class="margin">
      <template v-slot:header>
        <h3>人气排行({{ list.total }})</h3>
      </template>
    </book-list>
    <!-- 没数据 -->
    <van-empty description="该类型小说暂无" v-if="list.total == 0" />
    <van-overlay :show="overlay">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
    
  </div>
</template>

<script>
import { getCategories } from "../../api/category/all.js";
export default {
  data() {
    return {
      list: [], // 底部的数据列表
      hot: {}, // 主编精选
      overlay: true,
    };
  },
  methods: {
    getData() {
      let q = {
        major: this.$route.query.tit,
        minor: this.$route.query.minor,
        start: 0,
        limit: 10,
        gender: this.$store.state.ismale,
      };

      getCategories(q).then((data) => {
        if (data.ok) {
          console.log("列表数据获取成功");
          this.list = data;
        }
        // console.log(this.list);
      });
      // 热门的
      q.type = "hot";
      getCategories(q).then((data) => {
        if (data.ok) {
          this.hot[this.$store.state.ismale] = data.books;
          this.overlay = false;
        }
        // console.log(this.hot);
      });
      //   console.log(q);
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.navtop{
  background-color: white;
}
</style>